<%@ page pageEncoding="UTF-8" %>


<table style="width: 320px; height: 230px; margin-top: 20px">
    <tr>
        <td style="width: 120px">数据库类型：</td>
        <td>
            <select id="type" style="text-align: center"></select>
        </td>
    </tr>
    <tr>
        <td>Host：</td>
        <td><input id="host" type="text" /><br /></td>
    </tr>
    <tr>
        <td>Port：</td>
        <td><input id="port" type="text" style="width: 40px" /><br /></td>
    </tr>
    <tr>
        <td>Username：</td>
        <td><input id="username" type="text" /><br /></td>
    </tr>
    <tr>
        <td>Password：</td>
        <td><input id="password" type="password" /><br /></td>
    </tr>
    <tr>
        <td>Database：</td>
        <td><input id="database" type="text" /><br /></td>
    </tr>
    <tr>
        <td><button id="test">测试连接</button></td>
        <td><button id="save">保存</button></td>
    </tr>
</table>
<br />
<div id="testStatus"></div>
<p>URL：<input id="url" type="text" style="width: 235px" /></p>

<script>
    "use strict";
    let dbMap = {};
    show();
    urlForInput();

    $("table td:nth-child(1)").css("text-align", "right");
    $("#type").change(function() {urlForInput();});
    $("#host").bind('input porpertychange', function() {urlForInput();});
    $("#port").bind('input porpertychange', function() {urlForInput();});
    $("#database").bind('input porpertychange', function() {urlForInput();});
    $("#test").click(function() {test();});
    $("#save").click(function() {save();});

    // url生成
    function urlForInput() {
        // $("#type").val()
        //let type = $("#type").find("option:selected").text();
        let type = $("#type").val();
        let database = $("#database").val();
        let tmpUrl = $("#host").val() + ":";

        if (type == "MySQL") {

            $("#port").val("3306");
            tmpUrl = tmpUrl + $("#port").val();
            tmpUrl = database == "" ? tmpUrl : tmpUrl+"/"+$("#database").val();
            $("#url").val(dbMap[type]+tmpUrl);

        } else if (type == "Oracle") {

            $("#port").val("1521");
            tmpUrl = tmpUrl + $("#port").val();
            tmpUrl = database == "" ? tmpUrl : tmpUrl+":"+database;
            $("#url").val(dbMap[type]+tmpUrl);

        } else if(type == "SQL Server") {

            $("#port").val("1433");
            tmpUrl = tmpUrl + $("#port").val();
            tmpUrl = database == "" ? tmpUrl : tmpUrl+";DatabaseName="+database;
            $("#url").val(dbMap[type]+tmpUrl);

        }
    }

    // 页面加载后，加载显式配置数据
    function show() {
        const result = ajaxMethod("show");
        const data = result.data;

        if (result.code == 0) {
            let options;
            $.each(data.types, function (index, item) {
                // 注意不要忘记引号
                options += "<option value='"+item+"'>"+item+"</option>";
            });
            $("#type").append(options);
            $("#host").val(data.host);
            $("#port").val(data.port);
            $("#username").val(data.username);
            $("#password").val(data.password);
            $("#database").val(data.database);
        }
        dbMap = data.dbs;
    }

    // 测试数据库连接
    function test() {
        let dbConnParam = {};
        dbConnParam["type"] = $("#type").val();
        dbConnParam["username"] = $("#username").val();
        dbConnParam["password"] = $("#password").val();
        dbConnParam["url"] = $("#url").val();

        let result = ajaxMethod("test", dbConnParam);
        if (result.code == 0) {
            let innerStr = "数据库连接状态：";
            let statusStr = "";
            if (result.data.status == true) {
                statusStr = "<span style='color: green;' >正常</span>";
            } else {
                statusStr = "<span style='color: #ff0000;' >失败</span>";
            }
            $("#testStatus").html(innerStr+statusStr);
        }
    }

    // 保存数据库配置
    function save() {
        let dbConnParam = {};
        dbConnParam["type"] = $("#type").val();
        dbConnParam["host"] = $("#host").val();
        dbConnParam["port"] = $("#port").val();
        dbConnParam["username"] = $("#username").val();
        dbConnParam["password"] = $("#password").val();
        dbConnParam["database"] = $("#database").val();
        dbConnParam["url"] = $("#url").val();

        let result = ajaxMethod("save", dbConnParam);

        if (result.code == 0) {
            alert("数据库配置保存成功");
        } else {
            alert("保存失败");
        }
    }
</script>